<template>
    <div class="video-detail">
        <el-container>
            <el-header style="padding: 0;"><Header headerClass="about-div"/></el-header>
            <el-main>
                <el-row :gutter="40" style="height: 100%">
                    <el-col :span="18">
                        <h1 class="title_p" style="height: 30px;margin: 20px 0;color: #475669">{{v.title}}</h1>
                        <div style="text-align: left;display: flex;align-items: center;margin: 10px 0 ">
                            <el-icon size="20px"><WarningFilled /></el-icon>未经作者授权，禁止转载
                        </div>
                        <div style="border-bottom: #bbbbbb solid 1px;text-align: left">
                            <video autoplay controls width="920" height="520"
                                   style="background-color: black"
                                :src="v.videoUrl">
                            </video>
                            <div style="height: 32px">
                                <el-button :class="liked ? 'liked' : ''" @click="toggleLike" style="padding: 0">
                                    <img src="R-C.png" alt="1111111" width="30" height="30">
                                    <!--<span v-if="liked">已赞</span>-->
                                    <!--<span v-else>点赞</span>-->
                                </el-button>
                                <el-button type="primary" @click="collect">收藏</el-button>
                            </div>
                        </div>
                        <div style="">
                            <!--    评论相关开始    -->
                            <el-card style="margin-top: 20px">
                                <p>发一条友善的评论</p>
                                <hr>
                                <el-row>
                                    <el-col :span="22">
                                        <el-input placeholder="请输入评论的内容..." v-model="comment.content"></el-input>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button @click="postComment">发布</el-button>
                                    </el-col>
                                </el-row>
                                <!--      评论列表    -->
                                <el-row style="margin: 20px;text-align: left;"
                                        v-for="item in commentArr">
                                    <el-col :span="2">
                                        <el-avatar :src="item.avatar"></el-avatar>
                                    </el-col>
                                    <el-col :span="22" style="border-bottom: #99a9bf solid 1px">
                                        <p style="color: orange;font-weight: bold;margin: 0">{{ item.username }}</p>
                                        <p style="margin: 5px 0">{{ item.content }}</p>
                                        <p style="color: #666;font-size: 12px">{{ item.gmtCreate }}</p>
                                    </el-col>
                                </el-row>
                            </el-card>
                            <!--    评论相关结束    -->
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content ep-bg-purple">
                            <div style="margin: 20px 0;text-align: left;height: 70px;">
                                <el-avatar :size="60" src="https://empty" @error="errorHandler">
<!--                                    https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png-->
                                    <img
                                        :src="author.avatar"
                                    />
                                </el-avatar>
                                <div style="float: right;width: 210px">
                                    <p style="margin: 0;font-weight: bold">{{ v.authorName }}</p>
                                    <p class="title_p" style="font-size: 14px">作者简介</p>
                                    <button @click="toPay">充电</button>&nbsp;&nbsp;
<!--                                    <button>关注</button>-->
                                </div>
                            </div>
                            <div style="height: 150px;text-align: center;background-color: #d9ffa1">
                                <p style="color: #00d9ff;line-height: 150px">买家具去豪成钢木家具厂</p>
                            </div>
                            <div style="margin: 20px 0;">
                                <div v-for="item in v_list" style="height: 80px;width: 280px;margin-bottom: 20px;background-color: #fcfcfc;text-align: left">
                                    <a href="" @click="detail(item.id)" target="_blank">
                                    <div style="border-radius: 3px;overflow: hidden;height: 80px;width: 142px;display: inline-block;float: left">
                                        <img :src="item.coverUrl" alt="封面图片损坏" style="height:100%;">
                                    </div>
                                    <div style="height: 80px;width:128px;display: inline-block;margin-left: 10px">
                                        <p class="title_p_list" style="color: #2c3e50;font-size: 14px">{{ item.title }}</p>
                                        {{item.authorName}}
                                    </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

</template>

<script setup>
import Header from "@/components/Header.vue";
import {onMounted , ref} from "vue";
import router from "@/router";
import axios from "axios";
import Reg from "@/components/Reg.vue";
import SimpleAxios from "@/http/request/SimpleAxios";
import TokenAxios from "@/http/request/TokenAxios";
import {ElMessage} from "element-plus";

const liked = ref(false) ;// 初始点赞状态为未点赞


const toggleLike = () => {
    liked.value = !liked.value; // 点击按钮时切换点赞状态
};

const v = ref({});

const v_list = ref([]);

const comment=ref({content:''});

const author=ref({});

const alipay=ref({money:'2'});

const paymentPageContent=ref();

const user=ref(getUser());
//支付
const toPay = ()=>{
    alipay.value.title=v.value.title;
    alipay.value.authorId=v.value.authorId;
    let id = new URLSearchParams(location.search).get('id');
    alipay.value.videoId=id;
    TokenAxios.post('http://localhost:26000/alipay/toPay',alipay.value)
        .then((response)=>{
                ElMessage.success('准备支付')
                paymentPageContent.value=response;

            // // 自动提交支付表单
            // autoSubmitPaymentForm(response);

            // 在新窗口中打开支付页面
            openPaymentPageInNewWindow(response);

        })
}
const openPaymentPageInNewWindow = (htmlContent) => {
    // 创建一个新窗口
    const newWindow = window.open('', '_blank');

    // 将支付页面的 HTML 内容写入新窗口
    newWindow.document.write(htmlContent);

    // 关闭新窗口时清理资源
    newWindow.onbeforeunload = () => {
        newWindow.close();
    };
}
//收藏
const collectDto=ref({});
const collect = ()=>{
  if (user.value==null){
    ElMessage.error('未登录,请登录体验更多内容');
    return;
  }
    collectDto.value.videoId=new URLSearchParams(location.search).get('id');
    collectDto.value.state=2;
    TokenAxios.post('http://124.71.182.39:26000/LikeCollect/VideoLikeOrCollect',collectDto.value)
        .then((response)=>{
            if (response.state===20000){
                ElMessage.success('收藏成功')
            }else {
                ElMessage.error(response.message)
            }
        })

}

//发评论
const postComment=()=>{
  if (user.value==null){
    ElMessage.error('未登录,请登录体验更多内容');
    return;
  }
    if (comment.value.content.trim()==''){alert("评论内容不能为空")}
    comment.value.resourceId= v.value.id;
    comment.value.resourceType=0;
    console.log(comment.value)
    TokenAxios.post('http://124.71.182.39:26000/comment/addNew',comment.value).then((response)=>{
        if (response.state===20000){
            ElMessage.success('评论完成!');
            comment.value.content = ''; // 清空评论输入框的内容
            loadComments(v.value.id)
        }
    })
}

//评论列表
const commentArr = ref([])

const loadComments=(id)=>{
    SimpleAxios.get('http://124.71.182.39:26000/comment/list/'+id)
        .then((response)=>{
            if (response.state===20000){
                commentArr.value=response.data;
            }
        })
}

const detail=(id)=>{
    router.push('/detail?id='+id);
    //获取所有评论
    loadComments(id);
    axios.get('http://124.71.182.39:26000/video/detail/'+id)
        .then((response)=>{
            if (response.data.state==20000){
                v.value = response.data.data;
                console.log(111111);
                console.log(v.value.categoryId);
                // return getVList(response.data.data.categoryId);
            //通过作者id发出请求获取作者相关内容 c.value.userId
            //此处写发请求的代码
                SimpleAxios.get('http://124.71.182.39:26000/video/detail/' + v.value.categoryId + '/list')
                    .then((response)=>{
                        if (response.state === 20000) {
                                    v_list.value = response.data;
                        }
                    })
                SimpleAxios.get('http://124.71.182.39:26000/user/'+v.value.authorId)
                    .then((response)=>{
                        if (response.state===20000){
                            author.value=response.data;
                        }
                    })
        }
    })
        // .then((response) => {
        //     if (response.data.state === 20000) {
        //         v_list.value = response.data.data;
        //     }
        // })
        // .catch((error) => {
        //     console.error(error);
        // });
}

const getVList=(categoryId)=>{
    return axios.get('http://124.71.182.39:26000/video/detail/' + categoryId + '/list');
}

const getAuthorInfo = (authorId) => {
  SimpleAxios.get('http://124.71.182.39:26000/user/'+authorId)
}

onMounted(()=>{
    //得到地址栏中的id 然后发请求获取id对应的内容详情
    let id = new URLSearchParams(location.search).get('id');
    detail(id);
})

</script>

<style scoped>

/* 在样式中定义点赞按钮的样式 */
.liked {
    background-color: red;
    color: white;
}

.video-detail{
    width: 1500px;
    margin: 0 auto;
    background-color: white;
}
.el-main{
    padding: 0 130px;
    min-height: 100vh;
}
.bi:hover{
    color: dodgerblue;
}
.title_p {
    text-align: left;
    color: #99a9bf;
    font-weight: bold;
    line-height: 1.3;
    margin: 5px 0 ;
    height: 16px;
    overflow: hidden; /*超出不显示*/
    /*设置省略号相关样式*/
    display: -webkit-box;
    -webkit-line-clamp: 1; /*设置行数*/
    -webkit-box-orient: vertical; /*纵向*/
}
.title_p_list{
    text-align: left;
    color: #1f1f1f;
    line-height: 1.3;
    margin: 5px 0 ;
    height: 34px;
    overflow: hidden; /*超出不显示*/
    /*设置省略号相关样式*/
    display: -webkit-box;
    -webkit-line-clamp: 2; /*设置行数*/
    -webkit-box-orient: vertical; /*纵向*/
}
</style>